<template>
  <div class="addBankCard">
    <div class="content">
      <div :class="`bank_list`" v-for="(item, index) in myBankData.list" :key="index">
        <div :class="`bank_item flex ${index === 0 ? 'bank_used' : ''}`">
          <div class="bank_l_icon">
            <ImgT :src="`/imgs/bankIcon/bank_logo_${item.bank_id}.webp`" :alt="item?.bank_name" />
          </div>
          <div class="bank_l_name">
            <div class="info_text">
              <p>
                <span>{{ item.bank_name }}</span>
              </p>
              <p><span>*******</span></p>
              <p>{{ maskTxtString(item.account_number) }}</p>
            </div>
            <div class="utilization_bank">
              <template v-if="index === 0">
                <div class="btn_bank">
                  {{ t('paymentManagement_page_inUse') }}
                </div>
                <div class="btn_bank">
                  {{ t('paymentManagement_page_default_bank') }}
                </div>
              </template>
              <template v-else>
                <div @click="bankCheck(item, 'del')" class="btn_bank btn_bank-use">
                  {{ t('paymentManagement_page_delete') }}
                </div>
                <div @click="bankCheck(item, 'default')" class="button_color btn_bank btn_bank_default">
                  {{ t('paymentManagement_page_set_default') }}
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
      <div v-if="!(myBankData.list.length >= 6)">
        <div class="bank_list_add" v-show="!addBankFlag">
          <div class="center" @click="flagBank(true)">
            <iconpark-icon icon-id="add-f4melk13" size="1.5rem"></iconpark-icon>
            <span>{{ t('paymentManagement_page_new_bank') }}</span>
          </div>
        </div>
      </div>

      <div class="tip" v-show="!addBankFlag">
        <iconpark-icon name="Vector" size=".75rem"></iconpark-icon>
        <span>{{ t('paymentManagement_page_max_bank', { num: myBankData.list?.length || 0 }) }}</span>
      </div>

      <div class="form_box" v-show="addBankFlag">
        <nut-form ref="formRef" label-position="top" class=" bank-add-form" :model-value="form">
          <div class="add-bank-text">
            <p>{{ t('paymentManagement_page_add_one_bank') }}</p>
            <iconpark-icon icon-id="x" size="1.125rem" @click="flagBank(false)"></iconpark-icon>
          </div>

          <nut-form-item :label="t('addBank_page_pChooseBank')">
            <div class="choose_bank flex">
              <div class="choose_bank_l flex">
                <span class="bank_cicon" v-if="chooseBank.value">
                  <ImgT :src="`/imgs/bankIcon/bank_logo_${chooseBank.value}.webp`" :alt="chooseBank.label" />
                </span>
                <span class="bank_cname"> {{ chooseBank.label }} </span>
              </div>

              <nut-button :bordered="false" block class="change_btn" @click="showChangeBank">
                {{ t('deposit_page_changeWay') }}
              </nut-button>
            </div>
          </nut-form-item>
          <nut-form-item :label="t('addBank_page_bankCard')" path="bankCode">
            <nut-input size="large" @input="validateInput" v-model="form.bankCode"
              :placeholder="t('paymentManagement_page_chCardNo')">
              <template #suffix>
                <span class="refresh_icon"></span>
              </template>
            </nut-input>
          </nut-form-item>
          <nut-form-item :label="t('addBank_page_name')" path="accountName">
            <nut-input size="large" :disabled="!!cardholder_name" v-model="form.accountName"
              :placeholder="t('paymentManagement_page_enterBank')">
              <template #suffix>
                <span class="refresh_icon"></span>
              </template>
            </nut-input>
          </nut-form-item>
          <nut-button :bordered="false" block class="sub_btn" @click="submit">
            {{ t('paymentManagement_page_confirm') }}
          </nut-button>
        </nut-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { showToast } from "@nutui/nutui";
// import { Net } from "@/net/Net";
import H5Websocket from "@/net/Net1";
import { NetPacket } from "@/netBase/NetPacket";
import { useI18n } from "vue-i18n";
import { MessageEvent2 } from "@/net/MessageEvent2";
import { NetMsgType } from "@/netBase/NetMsgType";
import { testBankCard } from "@/utils/validateTools.ts";
import { maskTxtString } from "@/utils/publicMethods.ts";

const { t } = useI18n();
const props = defineProps<{
  myBankData: any
  bankListData: any,
  addBankCardVisible: Boolean,
}>()
const emit = defineEmits<{
  openChooseBank: any
  addBankCardVisible: [any, string]
  updateMyBankList: any
}>()

const cardholder_name = ref('')
const form = ref({
  bank: '',
  bankCode: '',
  bankName: '',
  accountName: '',
})
const baseObj = { label: '', value: '' }
const chooseBank = ref({ ...baseObj }); // 选择的银行卡
const addBankFlag = ref<Boolean>(false)

// 限制只能输入输入数字
const validateInput = () => {
  form.value.bankCode = form.value.bankCode.replace(/[^0-9]/g, '');
}
const submit = () => {
  if (!form.value.bank) {
    return showToast.fail(t('paymentManagement_page_chBank'))
  }
  if (!form.value.bankCode) {
    return showToast.fail(t('paymentManagement_page_chCardNo'))
  }
  if (!testBankCard(form.value.bankCode)) {
    return showToast.fail(t('paymentManagement_page_tip1'))
  }
  if (!form.value.accountName) {
    return showToast.fail(t('paymentManagement_page_enterBank'))
  }
  const req = NetPacket.req_new_bank_card_info();
  req.bank_id = form.value.bank;
  req.account_number = form.value.bankCode;
  req.cardholder_name = props.myBankData.cardholder_name ? props.myBankData.cardholder_name : form.value.accountName?.replace(/\s+/g, '').toUpperCase(); // 保存需要去除空格和转大写
  // Net.instance.sendRequest(req);
  H5Websocket.sendMessageHandler(req);
}

// result: 2 // 1 成功，2 失败
const handleAddBank = (res: any) => {
  const tips: any = {
    1: 'paymentManagement_page_addBankSuc',
    2: 'paymentManagement_page_addBankFail',
    3: 'paymentManagement_page_acc_already',
  }
  console.log('绑定成功-----')
  if (res.result === 1) {
    emit('updateMyBankList')
    flagBank(false)
    showToast.success(t(tips[res.result]));
  } else {
    showToast.fail(t(tips[res.result]));
  }
};

const showChangeBank = () => {
  emit('openChooseBank')
}
const bankCheck = (item: any, type: string) => {
  emit('addBankCardVisible', item, type)
};
const flagBank = (flag: Boolean) => {
  addBankFlag.value = flag
};

const resetParams = () => {
  chooseBank.value = { ...baseObj }
  form.value.bank = ''
  form.value.bankName = ''
  form.value.bankCode = ''
}

watch(
  () => addBankFlag.value,
  (n: any) => {
    if (!n) {
      resetParams()
    }
  })

watch(
  () => props.bankListData,
  (count: any) => {
    chooseBank.value = count
    form.value.bank = count.value
    form.value.bankName = count.label
  })

watch(
  () => props.myBankData.cardholder_name,
  (count: string) => {
    cardholder_name.value = count
    form.value.accountName = count
  })
watch(
  () => props.addBankCardVisible,
  (n: any) => {
    if (n) {
      // 绑定银行卡
      MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_req_new_bank_card_info, handleAddBank);
    } else {
      MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_req_new_bank_card_info, null);
    }
  })

onMounted(() => {
  if (props.myBankData.cardholder_name) {
    cardholder_name.value = props.myBankData.cardholder_name
    form.value.accountName = cardholder_name.value
  }
})

</script>

<style scoped lang="scss">
@use "../form.scss";

.flex {
  display: flex;
}

.addBankCard {
  width: 100%;
  height: 100%;
  padding: 20px 14px;
  background: #100E26;
  box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;
  //border: 1px solid #2E296B;
  border-radius: 8px 8px 0 0;

  .content {
    padding-bottom: 20px;
    background: #100E26;

    .sub_btn {
      width: 307px;
      height: 44px;
      border-radius: 8px;
    }

    .bank_list {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0 0 16px;
      overflow-y: auto;

      .bank_item {
        position: relative;
        justify-content: start;
        align-items: center;
        flex-flow: nowrap !important;
        cursor: pointer;
        font-size: 14px;
        width: 100%;
        height: 76px;
        padding: 14px 12px;
        border-radius: 6px;
        background: #1D1C3C;
        box-shadow: 0.5px 0.5px 1px 0 #333260 inset;
        border: 1px solid #333260;

        &::after {
          content: '';
          position: absolute;
          width: 88px;
          height: 33px;
          background: url(/imgs/payment/icon_bank.webp) center no-repeat;
          background-size: 100%;
          right: 3px;
          bottom: 5px;
        }

        &.bank_used {
          border-width: 2px;
          border-color: #0cc41e;
        }

        .bank_l_icon {
          position: relative;
          display: flex;
          align-items: center;
          margin-left: 4px;
          width: 48px;
          height: 48px;
          border-radius: 50%;
          padding: 12px 6px 13px;
          border: solid 3px #d6cdff;
          background-color: #fff;

          &::after {
            content: '';
            position: absolute;
            width: 1px;
            height: 48px;
            background: rgba(168, 168, 202, 0.2);
            right: -17px;
          }

          img {
            max-width: 45px;
          }
        }

        .bank_l_name {
          margin-left: 30px;
          flex: 1;
          display: flex;
          justify-content: space-between;
          width: 100%;

          .utilization_bank {
            position: relative;
            z-index: 5;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: space-around;

            .btn_bank {
              width: 66px;
              height: 20px;
              line-height: 20px;
              text-align: center;
              border: none !important;
              font-size: 12px;
              color: #fff;
              border-radius: 4px;
              background: #131232;
            }

            .btn_bank-use {
              background-color: rgba(12, 196, 30, 1);
            }

            .btn_bank:nth-child(2) {
              margin-top: 8px;
            }
          }

          .info_text {
            color: #fff;

            p {
              white-space: nowrap;
              font-size: 12px;
            }

            p:last-child {
              font-size: 16px;
              font-weight: 600;
            }
          }

        }

      }
    }

    .bank_list_add {
      cursor: pointer;
      font-size: 14px;
      height: 76px;
      background: #1D1C3C;
      box-shadow: 0.5px 0.5px 1px 0 #333260 inset;
      border-radius: 6px;

      .center {
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        img {
          width: 30px;
          height: 30px;
        }

        span {
          margin-top: 5px;
          color: #fff;
        }
      }
    }

    .tip {
      margin-top: 10px;
      display: flex;
      align-items: center;

      span {
        font-size: 12px;
        color: #A8A8CA;
        margin-left: 4px;
      }
    }
  }

  .form_box {
    border-radius: 8px;
    background: #131232;
    box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;
    padding: 16px 20px;

    .bank-add-form {

      .add-bank-text {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        font-weight: normal;
        margin-bottom: 14px;
        color: #fff;

        img {
          cursor: pointer;
        }
      }

      .choose_bank {
        flex-flow: nowrap !important;
        justify-content: space-between;

        .choose_bank_l {
          align-items: center;
          width: 195px;
          height: 44px;
          padding-left: 8px;
          border-radius: 8px;
          background: #1D1C3C;
          box-shadow: 0.5px 0.5px 1px 0 #333260 inset;

          .bank_cicon {
            display: flex;
            flex: none;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            margin-right: 6px;
            border-radius: 50%;
            background: #fff;
            border: solid 1.5px #d6cdff;

            img {
              width: 20px;
              border-radius: 50%;
            }
          }

          .bank_cname {
            color: #fff;
            font-size: 12px;
            width: 220px;
            line-height: 16px;
          }
        }

      }
    }
  }
}
</style>
